<template>
	<view class="message-wrapper">
		<custom-header-bar bg="1" title="消息"></custom-header-bar>
		<div class="container">
			<div v-if="messageList===''">
				<empty-loading type="loading" text="正在加载..."></empty-loading>
			</div>
			<div v-else-if="messageList.length===0">
				<empty-loading type="empty" text="暂无消息"></empty-loading>
			</div>
			<div class="message-list" v-else>
				<div class="item" v-for="(item,index) in messageList" @click="messagfeDetail(item)">
					<div class="title">
						<div class="name">
							<span class="text"
								:class="{'unread-text':item.readUnread==='unread'}">{{item.msgTypeName}}</span>
							<image v-if="item.readUnread==='unread'" class="unread" src="/static/icon-message.png">
							</image>
						</div>
						<div>{{item.msgTime}}</div>
					</div>
					<p class="content">
						{{item.msgContent}}
					</p>
				</div>
			</div>
		</div>
		<custom-tab-bar selected="3"></custom-tab-bar>
	</view>

</template>

<script>
	import EmptyLoading from '@/components/empty-loading.vue'
	import CustomHeaderBar from '@/components/custom-header-bar.vue'
	import CustomTabBar from '@/components/custom-tab-bar.vue'
	import {
		getPrewarnList
	} from "@/api/message.js"
	export default {
		data() {
			return {
				messageList: ''
			}
		},
		onLoad() {
			setTimeout(() => {
				uni.hideTabBar({
					complete(res) {
						console.log(res)
					}
				})
			}, 300)
			this.initParams()
			this.initData()
		},
		onShow() {
			uni.hideTabBar()
		},
		onReachBottom() {
			this.continueLoad()
		},
		methods: {
			continueLoad() {
				this.pageNum += 1
				this.initData()
			},
			initData() {
				if (this.finish) return
				getPrewarnList({
					pageSize: this.pageSize,
					pageNum: this.pageNum
				}).then((res) => {
					this.messageList = this.messageList || []
					this.messageList = [...this.messageList, ...res.data.rows]
					if (res.data.rows.length < 10) {
						this.finish = true
					}
					uni.stopPullDownRefresh()
				})
			},
			initParams() {
				this.messageList = ''
				this.finish = false
				this.pageSize = 10
				this.pageNum = 1
			},
			messagfeDetail(item) {
				item.readUnread = 'read'
				uni.navigateTo({
					url: "/pages/messsage/details/index?id=" + item.msgId
				})
			},
		},
		onPullDownRefresh() {
			this.initParams();
			this.initData();
		},
		computed: {

		},
		components: {
			CustomHeaderBar,
			CustomTabBar,
			EmptyLoading
		}
	}
</script>

<style lang="scss">
	.message-wrapper {
		background-color: #F4f4f4;
		padding: 160upx 0 120upx 0;
		min-height: 100%;

		.container {
			box-sizing: border-box;
			padding: 24upx;

			.message-list {

				.item {
					padding: 30upx;
					margin-top: 24upx;
					background: #FFFFFF;
					border-radius: 30upx;
					box-sizing: border-box;

					.title {
						display: flex;
						justify-content: space-between;
						word-break: keep-all;

						.name {
							display: flex;
							justify-content: space-between;
							align-items: center;
							word-break: keep-all;

							.unread-text {
								color: #82D8CF;
							}

							.unread {
								position: relative;
								top: -12upx;
								left: 12upx;
								width: 24upx;
								height: 24upx;
							}
						}


					}

					.content {
						margin-top: 24upx;
						color: #000000A6;
						font-size: 24upx;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
						word-break: break-all;
					}
				}
			}

			.item:nth-child(1) {
				margin-top: 0;
			}

		}
	}
</style>
